<template>
  <div class="redirect-page">
    <div class="redirect-content">
      <el-result
        icon="info"
        title="页面跳转中"
        subTitle="正在为您跳转到目标页面..."
      >
        <template #icon>
          <el-icon class="is-loading"><Loading /></el-icon>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Loading } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

onBeforeMount(() => {
  const { params, query } = route
  const { path } = params
  router.replace({ path: '/' + path, query })
})
</script>

<style scoped>
.redirect-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.redirect-content {
  text-align: center;
}
</style>